// 时间选择框组件
<template>
    <a-date-picker
        dropdownClassName="j-date-picker"
        :disabled="disabled || readOnly"
        :placeholder="placeholder"
        @change="handleDateChange"
        :value="momVal"
        :showTime="showTime"
        :format="dateFormat"
        :getCalendarContainer="getCalendarContainer"
        v-bind="$attrs" />
</template>
<script>
import moment from 'moment';
export default {
    name: 'JDate',
    props: {
        // 日期输入框自定义文案
        placeholder: {
            type: String,
            default: '',
            required: false
        },
        value: {
            type: String,
            required: false
        },
        dateFormat: {
            type:String,
            default: 'YYYY-MM-DD',
            required: false
        },
        readOnly: {
            type: Boolean,
            required: false,
            default: false
        },
        disabled: {
            type: Boolean,
            required: false,
            default: false
        },
        showTime: {
            type: Boolean,
            required: false,
            default: false
        },
        getCalendarContainer: {
            type: Function,
            default: (node) => node.parentNode
        }
    },
    data() {
        let dateStr = this.value;
        return {
            decorator:"",
            momVal:!dateStr?null:moment(dateStr,this.dateFormat)
        }
    },
    watch: {
        value(val) {
            if(!val) {
                this.momVal = null;
            }else {
                this.momVal = moment(val,this.dateFormat)
            }
        }
    },
    methods: {
        moment,
        handleDateChange(mom,dateStr) {
            this.$emit('change', dateStr);
        },
    },
    // 在组件内定义  指定父组件调用时候的传值属性和事件类型
    model: {
        prop: 'value',
        event: 'change'
    }
}
</script>